<template>
  <div class="p-4">
    <Card class="layout-card" title="员工详情">
      <Descriptions bordered :column="3" size="small">
        <DescriptionsItem label="员工名称">
          {{ staff.name }}
        </DescriptionsItem>
        <DescriptionsItem label="工号">
          {{ staff.staffNo }}
        </DescriptionsItem>
        <DescriptionsItem label="部门">
          {{ staff.department }}
        </DescriptionsItem>
        <DescriptionsItem label="电话">
          {{ staff.phone }}
        </DescriptionsItem>
        <DescriptionsItem label="邮箱">
          {{ staff.email }}
        </DescriptionsItem>
        <DescriptionsItem label="认证等级">
          {{ staff.authLevel }}
        </DescriptionsItem>
        <DescriptionsItem label="员工等级">
          {{ staff.level }}
        </DescriptionsItem>
      </Descriptions>
    </Card>
    <Card class="layout-card mt-4">
      <Button @click="$router.go(-1)"> 返回 </Button>
    </Card>
  </div>
</template>

<script lang="ts" setup>
import { Descriptions, DescriptionsItem, Card, Button } from 'ant-design-vue';

const staff = {
  name: '张三',
  staffNo: '001',
  department: '开发部',
  phone: '13800138000',
  email: 'zhangsan@qq.com',
  authLevel: 'A',
  level: '中级',
};
</script>
